<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row>
        <!-- 查询表单区域 -->
        <el-form :inline="true" :model="state.queryForm" ref="queryRef">
          <el-form-item label="楼宇名称">
            <el-input
                v-model="state.queryForm.buildingName"
                placeholder="输入楼宇名称查询"
                clearable
                @keyup.enter.native="getPage"
                style="width: 200px; margin-right: 10px;"
            />
          </el-form-item>
          <el-form-item label="建成开始时间">
            <el-date-picker
                v-model="state.queryForm.startTime"
                type="date"
                placeholder="选择开始时间"
                clearable
            />
          </el-form-item>
          <el-form-item label="建成结束时间">
            <el-date-picker
                v-model="state.queryForm.endTime"
                type="date"
                placeholder="选择结束时间"
                clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getPage">查询</el-button>
            <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()">新增</el-button>
            <el-button @click="resetQuery" icon="Refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <!-- 表格展示区域 -->
      <el-table
          :data="state.dataList"
          v-loading="state.loading"
          border
          :cell-style="tableStyle.cellStyle"
          :header-cell-style="tableStyle.headerCellStyle"
      >
        <el-table-column prop="buildingName" label="楼宇名称" show-overflow-tooltip />
        <el-table-column prop="floors" label="层数" show-overflow-tooltip />
        <el-table-column prop="height" label="高度" show-overflow-tooltip />
        <el-table-column prop="area" label="占地面积" show-overflow-tooltip />
        <el-table-column prop="completionTime" label="建成时间" show-overflow-tooltip />
        <el-table-column prop="unitNum" label="单元数" show-overflow-tooltip />
        <el-table-column prop="remark" label="备注" show-overflow-tooltip />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button icon="edit-pen" text type="primary" @click="formDialogRef.openDialog(scope.row.buildingId)">编辑</el-button>
            <el-button icon="delete" text type="primary" @click="handleDelete([scope.row.buildingId])">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          v-bind="state.pagination"
      />
    </div>
    <!-- 新增/编辑弹窗，单独拆分为组件 -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
  </div>
</template>

<script setup lang="ts" name="BuildingManage">
import { reactive, ref } from 'vue';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { buildingList,deleteBuilding } from '/@/api/building/building';
import { useMessage, useMessageBox } from '/@/hooks/message';

// 引入新增/编辑弹窗组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const formDialogRef = ref();
const queryRef = ref();

// 表格数据、查询条件等状态
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    buildingName: '',
    startTime: null,
    endTime: null
  },
  dataList: [],
  loading: false,
  pagination: {
    current: 1,
    size: 10,
    total: 0
  },
  pageList: buildingList
});

// 表格 hook 逻辑（封装了获取数据、分页等逻辑，按实际 hooks 实现调整）
const {
  getDataList,         // 获取表格数据的方法
  currentChangeHandle, // 页码变化处理函数
  sizeChangeHandle,    // 每页条数变化处理函数
  tableStyle           // 表格样式对象（包含表头和单元格样式）
} = useTable(state);

// 清空查询条件
const resetQuery = () => {
  queryRef.value?.resetFields();
  getDataList();
};



// 删除操作
const handleDelete = async (ids: string[]) => {
  try {
    await useMessageBox().confirm('此操作将永久删除，是否继续？');
  } catch {
    return;
  }
  try {
    await deleteBuilding(ids);
    await getDataList();
    useMessage().success('删除成功');
  } catch (err: any) {
    useMessage().error(err.msg || '删除失败');
  }
};

// 点击查询按钮触发（也可结合 enter 事件）
const getPage = () => {
  state.dataList = [];
  getDataList();
};
</script>
